---
title: Contributing to HyperUI
description: Learn how to get involved with HyperUI development, report issues, and add new components or collections.
emoji: 🫵
slug: how-to-contribute
pubDate: 2022-07-26
updatedDate: 2025-11-06
terms:
  - contribute
  - opensource
  - github
---

import BaseAd from '../../components/BaseAd.astro'

<BaseAd />

Contributing to open source can feel overwhelming, but getting involved with
HyperUI is straightforward and rewarding. Here's how you can help make HyperUI
even better.

## Found a Bug or Have an Idea?

If you notice something off—like a typo, accessibility issue, or SEO concern—or
if you have an idea for an improvement, please
[open an issue](https://github.com/markmead/hyperui/issues/new/choose). This
helps us discuss and plan the best way forward together.

## Want to Add or Improve Something?

Thinking of adding a new component or feature? Before you start,
[create an issue](https://github.com/markmead/hyperui/issues/new/choose) so we
can chat about your idea. For new components, sharing example designs is
helpful.

### Pull Request Process

All pull requests are reviewed before merging. You may receive feedback—this is
part of making HyperUI great! If feedback from the first review isn't addressed
by the third review, the PR will be closed. If new feedback comes up in the
third review, that's fine—just address it as usual.

### Setting Up HyperUI Locally

HyperUI runs on Next.js. To get started:

```shell
git clone git@github.com:markmead/hyperui.git
yarn install
yarn dev
yarn css --watch
```

### Adding a New Component

For example, to add a new footer component in the marketing category:

1. Create a new file in `/public/components/marketing/footers`.
2. Add the component to the group in
   `/src/data/components/marketing/footers.mdx`.

Component files are named incrementally (e.g., 21, 22, etc.). Please follow this
pattern.

#### Component Guidelines

Before adding or modifying components, review the
[Component Guidelines](https://github.com/markmead/hyperui/blob/main/COMPONENT_GUIDELINES.md).
These guidelines were created for AI assisted development but are also
recommended for all developers. They cover best practices for building clean,
customizable, and accessible components.

Key guidelines include:

1. Use Tailwind CSS for all components.
2. Only use official Tailwind CSS plugins. Declare any plugins used in the
   component object in the MDX file, for example:
   `plugins: ['@tailwindcss/forms']`.

See examples in the
[input component](/components/application/pagination#component-3).

### Creating a New Collection

To propose a new collection,
[open an issue](https://github.com/markmead/hyperui/issues/new/choose) so we can
discuss and brainstorm ideas together.
